<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/mySupplier" style="color: #409eff;">我的供应商</router-link></div>
          -->
		  <!-- <div class="hei10"></div> -->
          <div class="title">为避免您的损失，添加供应商前请确保已经取得良好的信任基础，敢探号不对商家间合作做担保，另：敢探号无号卡销售业务，仅提供技术服务，任何以敢探号名义招揽代理商的信息均为虚假。</div>
          <div class="add" style="display: flex;">
          	<el-button type="danger" round @click="log = true">添加供应商</el-button>

              <el-select style="margin-left: 15px;" v-model="is_shield_notice" clearable placeholder="请选择供货商消息状态">
              	<el-option label="已屏蔽消息" :value="1" ></el-option>
                <el-option label="未屏蔽消息" :value="0" ></el-option>

              </el-select>
              <el-select v-model="is_shield_goods" clearable placeholder="请选择供货商商品状态">
              	<el-option label="已屏蔽商品" :value="1" ></el-option>
                <el-option label="未屏蔽商品" :value="0" ></el-option>

              </el-select>
            	<el-button type="primary" round  plain @click="searchgo" >搜索</el-button>

          </div>
          <div class="con" v-loading="loading">
          	<div class="list">
          		<div class="th">供货商店铺名</div>
          		<div class="th">联系电话</div>
              <div class="th">
                <el-tooltip placement="top">
                  <div slot="content">屏蔽后，该供应商的商品在添加上游供应商商品时将不可见</div>
                  <div>商品屏蔽<i class="el-icon-question" style="color:#409eff;margin-left: 10px; cursor: pointer; font-size: 16px;"></i></div>
                </el-tooltip>
              </div>
              <div class="th">
                <el-tooltip placement="top">
                  <div slot="content">屏蔽后，您将不会再收到该供应商给您发送的通知消息和重要信息弹窗。</div>
                  <div>消息屏蔽<i class="el-icon-question" style="color:#409eff;margin-left: 10px; cursor: pointer; font-size: 16px;"></i></div>
                </el-tooltip>
              </div>
              <div class="th">
                <el-tooltip placement="top">
                  <div slot="content">该供应商上架的商品会自动上架到你的在售商品中，自动上架后默认仅自己可见，佣金按照设置的比例自动计算得出</div>
                  <div>自动上架商品<i class="el-icon-question" style="color:#409eff;margin-left: 10px; cursor: pointer; font-size: 16px;"></i></div>
                </el-tooltip>
              </div>
              <div class="th">自动上架可见</div>
              <div class="th">自动上架佣金配置</div>
          		<div class="th" style="border-right: 0;">操作</div>
          	</div>
          	<div class="list" v-for="item in list" :key="item.id">
          		<div class="td">{{item.name}}<i class="el-icon-edit" style="cursor: pointer; color: rgb(0, 126, 255); margin-left: 10px;" @click="xiugaimingzi(item)"></i></div>
          		<div class="td">{{item.mobile}}</div>
              <div class="td">
                <el-switch class="switch" v-model="item.is_shield_goods" active-color="#FF5C3B" inactive-color="#C9C9C9" :active-value='1'
                  :inactive-value='0'
				  active-text="已屏蔽" 　
					inactive-text="未屏蔽"
					@change="change_is_delivery(item)"></el-switch>
              </div>
              <div class="td">
                <el-switch class="switch" v-model="item.is_shield_notice" active-color="#FF5C3B" inactive-color="#C9C9C9" :active-value='1'
                  :inactive-value='0'
				  active-text="已屏蔽" 　
					inactive-text="未屏蔽"
					@change="change_is_delivery2(item)"></el-switch>
              </div>

              <div class="td">
                    <el-switch class="switch" v-model="item.auto_release" active-color="#FF5C3B" inactive-color="#C9C9C9" :active-value='1'
                      :inactive-value='0'
              active-text="已开启" 　
              inactive-text="已关闭"
              @change="change_relation_id(item.relation_id,item.auto_release)"></el-switch>
                  </div>
                  <div class="td">
                    <span v-if="item.show_type==0">仅自己可见</span>
                    <span v-if="item.show_type==1">全部可见</span>
                    <i class="el-icon-edit" style="cursor: pointer; color: rgb(0, 126, 255);" @click="opensee(item)"></i>
                  </div>
                  <div class="td">
                    <span v-if="item.release_type==1">{{item.kouchu}}</span>
                    <span v-if="item.release_type==0">{{item.release_rate}} %</span>
                     <i class="el-icon-edit" style="cursor: pointer; color: rgb(0, 126, 255);" @click="kailog2(item)"></i>
                  </div>
          		<div class="td"  style="border-right: 0;">
          			<el-button type="primary" size="mini" plain @click="tiaozhuan(item.shop_id)">查看商品
          			</el-button>

                <el-button type="primary" size="mini" plain @click="piliang(item)">批量上架商品
                </el-button>
          		</div>
          	</div>
          	<el-pagination background layout="total,prev, pager, next" :current-page="page"
          		@current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
          </div>
			</div>
		</div>
    <el-dialog title="添加供应商" center :visible.sync="log" width="440px" :close-on-click-modal="false">
    	<div>
    		<el-input v-model="disid" @input="search" style="width: 100%;" placeholder="请输入供应商代码"></el-input>
    		<div class="result">{{result}}</div>
    	</div>
    	<span slot="footer" class="dialog-footer">
    		<el-button type="info" round @click="log = false">取消</el-button>
    		<el-button type="danger" round @click="loggo">确定添加</el-button>
    	</span>
    </el-dialog>
    <el-dialog title="自动上架佣金配置" center :visible.sync="log2" width="600px" :close-on-click-modal="false">
      <div style="display:flex">
        <el-radio @input="choosebl1" style="margin-top: 10px;" v-model="radio1" label="1">使用扣除比例</el-radio>
        <div>
          <div>
            <el-input :disabled="radio2!=''" placeholder="请输入给下游的佣金比例数" style="width: 100%;" v-model="all2.release_rate">
                <template slot="append">%</template>
              </el-input>
          </div>
          <div style="margin: 20px 0;">
            算法：按照上游的佣金金额乘以您输入的佣金比例数给到下游<br/>
            例如：上游佣金为100，此处设置30%，表示给下游的是30元
          </div>
          <div style="color: #2974FF;">注：计算结果会四舍五入去掉小数</div>
        </div>
      </div>
      <div style="display:flex;margin-top: 20px;">
        <el-radio @input="choosebl2" style="margin-top: 10px;" v-model="radio2" label="1">使用扣除金额</el-radio>
        <div style="width: 378px;">
          <div>
            <el-input :disabled="radio1!=''" placeholder="输入中要扣除的中间费金额" style="width: 100%;" v-model="all2.kouchu">
            </el-input>
          </div>
          <div style="margin: 20px 0;">
            算法：按照上游的佣金金额减去您输入的扣除金额，得出应该给下游的金额<br/>例如：上游佣金为100，此处设置20元，表示给下游的是80元
          </div>
          <div style="color: #2974FF;">注：如果上游给的佣金金额低于您要扣除的中间费金额，商品不会自动上架</div>
        </div>
      </div>
      <div style="display: flex; margin-top: 20px;">
        <div style="width: 108px; text-align: right; padding-right: 30px; position: relative; top: 7px;">佣金描述</div>
        <div>
          <div>
            <el-input v-model="all2.auto_commission_rule" style="width: 100%;" placeholder="请输入佣金结算条件"></el-input>
          </div>
          <div style="margin-top: 20px;">
            同佣金规则中的佣金描述，展示给下游及订单导出明细中
          </div>
        </div>

      </div>
    	<span slot="footer" class="dialog-footer">
    		<el-button type="info" round @click="log2 = false">取消</el-button>
    		<el-button type="danger" round @click="quding">确定</el-button>
    	</span>
    </el-dialog>
    <!-- 自动上架可见 -->
    <el-dialog title="自动上架可见" center :visible.sync="isshowzdsj" width="440px" :close-on-click-modal="false">
    	<div class="t_long_input" >
    		<el-select  v-model="changeseeform.show_type" placeholder="请选择">
          <el-option :value="1" label="全部可见"></el-option>
          <el-option :value="0" label="仅自己可见"></el-option>
        </el-select>
    	</div>
    	<span slot="footer" class="dialog-footer">
    		<el-button type="info" round @click="isshowzdsj = false">取消</el-button>
    		<el-button type="danger" round @click="changesee">确定</el-button>
    	</span>
    </el-dialog>
		<!-- <foot></foot> -->

    <el-dialog :title="tt" center :visible.sync="plog" width="510px" :close-on-click-modal="false">
    	<div style="margin-bottom: 20px; color: #777;">按商品发布时间选择区间</div>
      <div style="margin-bottom: 20px;">
        <el-date-picker style="width: 470px;" v-model="times" @change="timechange" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
         type="datetimerange" range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="act==4"></el-date-picker>
      </div>
      <div style="margin-bottom: 20px; color: rgb(225, 0, 0);">注：该功能按照配置的自动上架可见和自动上架佣金配置参数生效</div>
    	<span slot="footer" class="dialog-footer">
    		<el-button type="info" round @click="plog = false">取消</el-button>
    		<el-button type="danger" round @click="pilianggo">确定</el-button>
    	</span>
    </el-dialog>

    <el-dialog title="修改供应商名称" center :visible.sync="log3" width="440px" :close-on-click-modal="false">
    	<el-input v-model="all3.partner" style="width: 100%;" placeholder="请输入修改的供应商名称"></el-input>
    	<span slot="footer" class="dialog-footer">
    		<el-button type="info" round @click="log3 = false">取消</el-button>
    		<el-button type="danger" round @click="xiugaigo">确定</el-button>
    	</span>
    </el-dialog>

    <notice></notice>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
  import notice from '@/components/notice.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot,
      "notice": notice
		},
		name: 'mySupplier',
		data(){
			return{
        loading: true,
        log: false,
        disid: "",
        result: "",
        list: "",
        total: 0,
        pagesize: 20,
        page: 1,
        is_shield_notice:"",
        is_shield_goods:"",
        log2:false,
        all2:{
          relation_id:"",
          release_rate:'',
          release_type:'',
          kouchu:'',
          auto_commission_rule:""
        },
        radio1:'',
        radio2:'',
        shop_id:"",
        isshowzdsj:false,
        changeseeform:{
          relation_id:'',
          show_type:null
        },
        plog:false,

        tt:"",
        times:[],
        all:{
          relation_id:"",
          start:"",
          end:""
        },
        log3:false,
        all3:{
          id:"",
          partner:""
        }
			}
		},
		beforeDestroy() {
		  document.onkeydown = null
		},
		created() {
		  //按回车键搜索
		  var that = this;
		  document.onkeydown = function(e) {
		    var ev = document.all ? window.event : e;
		    if (ev.keyCode == 13) {
		      that.getlist();
		    }
		  };

      this.getlist();

      axios.get('/api/gth/user/shop')
      	.then(response => {
      		if (response.data.msg.code == 0) {
      			this.shop_id = response.data.data.shop_id
      		}
      	})
		},
		methods:{

      xiugaigo:function(){
        axios.post('/api/gth/update/setpartner',this.all3)
        	.then(response => {
        		if (response.data.msg.code == 0) {
        			this.log3 = false
              this.$message.success('操作成功');
              this.getlist()
        		}else{
              this.$message.error(response.data.msg.info);
            }
        	})
      },

      xiugaimingzi:function(item){
        this.all3 = {
          id:item.shop_id,
          partner:item.partner
        }
        this.log3 = true
      },

      pilianggo:function(){
        axios.post('/api/plan-market/supplier/oldpage/add',this.all)
        	.then(response => {
        		if (response.data.msg.code == 0) {
        			this.plog = false
              this.$message.success('操作成功');
        		}else{
              this.$message.error(response.data.msg.info);
            }
        	})
      },
      timechange:function(){
        if (this.times != null) {
        	this.all.start = this.times[0]
        	this.all.end = this.times[1]
        }
      },
      piliang:function(item){
        this.tt = '批量上架'+item.name+'供应商商品'
        this.all = {
          relation_id:item.relation_id,
          start:"",
          end:""
        }
        this.plog = true
      },
      kailog2:function(item){
        if(item.kouchu == null){
          item.kouchu = ""
        }
        this.all2 = {
          relation_id:item.relation_id,
          release_rate:item.release_rate,
          kouchu:item.kouchu,
          release_type:item.release_type,
          auto_commission_rule:item.auto_commission_rule
        }
        if(this.all2.release_rate == 0){
          this.all2.release_rate = ""
        }
        if(this.all2.kouchu == 0){
          this.all2.kouchu = ""
        }

        if(item.release_type==0){
            //0按百分比设置佣金，1按照固定扣金额
            this.radio1 = '1'
            this.radio2 = ""
        }else if(item.release_type==1){
            this.radio1 = ""
            this.radio2 = '1'
        }
        this.log2 = true
      },
      quding:function(){


          //判断种类
          if(this.radio1!=''){
            //说明按比例
            if(this.all2.release_rate<0){
              this.$message.error('比例不能小于0');
              return
            }
            if(this.all2.release_rate>100){
              this.$message.error('比例不能大于100');
              return
            }
            this.all2.release_type = 0
            this.all2.kouchu = ''
          }
          if(this.radio2!=''){
            //说明按金额
            if(this.all2.kouchu<0){
              this.$message.error('不能小于0');
              return
            }
            this.all2.release_type = 1
            this.all2.release_rate = ''
          }

        if(this.all2.kouchu == ""){
          this.all2.kouchu = 0
        }



        axios.post('/api/plan-market/supplier/data/update', this.all2)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('设置成功');
              this.log2 = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //0关1开
      change_relation_id:function(relation_id,auto_release){
        axios.post('/api/plan-market/supplier/data/update', {
            relation_id:relation_id,
            auto_release:auto_release,
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      change_is_delivery: function(item) {
        axios.post('/api/plan-market/supplier/shield/goods', {
            supplier_shop_id: item.shop_id,
            is_shield_goods: item.is_shield_goods,
          })
          .then(response => {
            if (response.data.msg.code == 0) {

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      change_is_delivery2: function(item) {
        axios.post('/api/plan-market/supplier/shield/notice', {
            supplier_shop_id: item.shop_id,
            is_shield_notice: item.is_shield_notice,
          })
          .then(response => {
            if (response.data.msg.code == 0) {

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
      	this.loading = true
      	this.page = page
      	this.getlist()
      },
      //跳转
      tiaozhuan: function(id) {
      	this.$router.push({
      		path: '/productionDelivery/productionOther',
      		query: {
      			id: id
      		}
      	})
      },
      searchgo:function(){
        this.page = 1
        this.getlist()
      },
      //获取供应商
      getlist: function() {
      	var that = this;
      	axios.get('/api/gth/supplier/list?page=' + this.page + '&page_size=' + this.pagesize + '&is_shield_goods='+this.is_shield_goods + '&is_shield_notice='+this.is_shield_notice)
      		.then(response => {
      			if (response && response.data.msg.code == 0) {
      				that.total = response.data.data.total
      				that.list = response.data.data.data
              that.list.forEach(item=>{
                if(item.auto_release == null){
                  item.auto_release = 0
                }
                if(item.release_rate == null){
                  item.release_rate = 0
                }
              })
      				that.loading = false
      			} else {
      				if (response.data.msg.code == 50401) {

      				} else {
      					that.$message({
      						message: '没搜索到供应商！',
      						type: 'error'
      					});
      					// that.result = "没搜索到供应商"
      					that.loading = false
      				}

      			}
      		})
      },
      //添加供应商先搜索
      search: function() {
      	var that = this;
      	axios.get('/api/plan-market/supplier/search?secret=' + this.disid)
      		.then(response => {
      			if (response.data.msg.code == 0) {
      				that.result = "供应商：" + response.data.data
      			} else {
      				// that.result = "没搜索到供应商"
      			}
      		})
      },
      //点击添加
      loggo: function() {
      	var that = this;
      	axios.post('/api/plan-market/supplier/add', {
      			secret: this.disid
      		})
      		.then(response => {
      			if (response.data.msg.code == 0) {
      				that.loading = true
      				that.$message({
      					message: '添加成功！',
      					type: 'success'
      				});
      				that.log = false
      				that.getlist();
      			} else {
              that.$message({
              	message: response.data.msg.info,
              	type: 'error'
              });
      			}
      		})
      },
      //修改可见弹窗
      opensee(item){
        this.changeseeform.relation_id = item.relation_id
        this.changeseeform.show_type = item.show_type
        this.isshowzdsj = true
      },
      //修改可见
      changesee(){
        axios.post('/api/plan-market/supplier/data/update', this.changeseeform)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('设置成功');
              this.isshowzdsj = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //选择比例1
      choosebl1(val){
        console.log(val)
        this.radio2 = ''
        this.all2.kouchu = ''
      },
      //选择比例2
      choosebl2(val){
        console.log(val)
         this.radio1 = ''
         this.all2.release_rate = ''
      }
		}
	}
</script>
<style scoped>
  /deep/ .el-input-group__append{ border: 0;}
		/*  */
		/deep/.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}

/*打开时文字位置设置*/
/deep/.switch .el-switch__label--right {
  z-index: 1;
}

/* 调整打开时文字的显示位子 */
/deep/.switch .el-switch__label--right span {
  margin-left: 0px;
}

/*关闭时文字位置设置*/
/deep/.switch .el-switch__label--left {
  z-index: 1;
}

/* 调整关闭时文字的显示位子 */
/deep/.switch .el-switch__label--left span {
  margin-left: 22px;
}

/*显示文字*/
/deep/.switch .el-switch__label.is-active {
  display: block;
}

/* 调整按钮的宽度 */
/deep/.switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
  height: 26px;
}
/deep/.switch.el-switch {
	height: 26px;
}
/deep/.switch.el-switch .el-switch__core{
	border-radius: 15px;
}
/deep/ .switch.el-switch .el-switch__label * {
	font-size: 12px !important;


}
/deep/.switch.el-switch .el-switch__core:after{
	top: 2px;
	width: 20px;
	height: 20px;
}
/deep/.el-switch.is-checked .el-switch__core::after{
	margin-left:-22px
}
/deep/ .t_more .el-icon--right{
	margin-left: 0;
}
/deep/ .el-switch__core:after{
	left: 2px;
}
/deep/ .el-switch__label--left{
	margin-left: 3px;
	margin-right: 0;
}
/deep/.t_long_input .el-select{
  width: 100% !important;
}
/deep/.t_long_input .el-input{
  width: 100% !important;
}
</style>
<style lang="scss" scoped>
	.index{

    /deep/ .el-select{width: 250px; margin-right: 20px;}
    /deep/ .el-input{width: 250px; margin-right: 20px;}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250); border: 0;}
    /deep/ .el-range-editor .el-range-input { background: #f7f8fa;}
    // /deep/ .el-button{ padding: 11px 23px !important;}

    /deep/ .el-input__inner:-moz-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner:-ms-input-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner::-webkit-input-placeholder {
        color: rgb(140, 140, 140);
    }
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    /deep/ .el-button--danger.is-plain {
        color: #EEF7FF !important;
        background: #EEF7FF !important;
        border-color: #18A0FB !important;
    }

		.title {
			padding-left: 30px;
			font-size: 13px;
			background: #F6F9FC;
			color: #788B9F;
			padding: 20px;
			box-sizing: border-box;
			margin: 20px;
		}

		.add {
			padding: 20px 30px
		}

		.list {
			display: flex;
			text-align: center;
			color: #727272;
			line-height: 45px;
			margin: 0 20px;
			border: 1px #EAEAEA solid;
			margin-top: -1px;


			.th {
				flex: 1;

				font-size: 14px;
				border-right: 1px #EAEAEA solid;
				background-color: #F6F6F6;
			}

			.td {
				flex: 1;
				font-size: 14px;
				border-right: 1px #EAEAEA solid;
			}
		}

		.el-pagination {
			text-align: right;
			margin: 20px 0
		}
	}
</style>
